<template>
  <div class="company">
    <div class="company-box">


      <div class="page-left">
        <div class="logo-box">
          <!-- <img class="logo-img" src="../../static/imgs/logo.png" alt=""> -->
          <div class="title">{{ $t('assemble.欢迎来到网易标签订购系统') }} <span style="font-size:15px;">V2.0</span> </div>
          <div class="page-text" v-html="content">
            <!-- 每个行业都有自己相对特定的工具，工具也代表了这个行业的工作内容特点，这两年一直处于居家办公状态的我，对线上协同办公的产品要求会高很多，操作使用无门槛，交流沟通效率高、产品性能流畅强，很难去评价蓝湖产品的某项优点，因为它就是会在不断的重复使用的过程中冲击你的爽点。 -->
          </div>
        </div>

      </div>


      <div v-if="show" class="company-content">
        <div class="company-text">
          <span>{{ $t('assemble.公司账号注册') }} </span>
        </div>
        <div class="company-bottom">
          <el-form :model="dataForm" :rules="datarange" ref="dataForm" label-width="100px" class="demo-ruleForm">
            <el-form-item prop="companyName">
              <div class="content-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>{{ $t('assemble.公司名称') }} </p>
                </div>
                <el-input class="input" v-model="dataForm.companyName" :placeholder="$t('assemble.请输入')"
                  @blur="handelcheckCompany"></el-input>
              </div>
            </el-form-item>
            <el-form-item prop="email">
              <div class="content-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>{{ $t('assemble.邮箱地址') }} </p>
                </div>
                <el-input class="input" v-model="dataForm.email" :placeholder="$t('assemble.请输入')"></el-input>
              </div>
            </el-form-item>

            <el-form-item prop="authcode">
              <div class="content-box huoqu-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>{{ $t('assemble.验证码') }} </p>
                </div>
                <el-input v-model="dataForm.authcode" :placeholder="$t('assemble.请输入')" @blur="checkCode"></el-input>
                <div v-if="codeflag" class="gain" @click="handleSendcode">
                  {{ $t('assemble.获取') }}
                </div>
                <div v-else class="gain">
                  {{ time }}s
                </div>
              </div>
            </el-form-item>

            <el-form-item prop="password">
              <div class="content-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>{{ $t('assemble.密码') }} </p>
                </div>
                <el-input class="input" v-model="dataForm.password" :placeholder="$t('assemble.请输入')"
                  show-password></el-input>
              </div>
            </el-form-item>

          </el-form>

          <!-- <div class="content-box">
            <div class="content-text">
              <p class="shu"></p>
              <p>邮箱地址</p>
            </div>
            <el-input class="input" v-model="email" placeholder="请输入"></el-input>
          </div> -->
          <!-- <div class="content-box huoqu-box">
            <div class="content-text">
              <p class="shu"></p>
              <p>验证码</p>
            </div>

            <el-input v-model="authcode" placeholder="请输入"></el-input>
            <div v-if="codeflag" class="gain" @click="handleSendcode">
              获取
            </div>
            <div v-else class="gain">
              {{ time }}s
            </div>
          </div> -->
          <!-- <div class="content-box">
            <div class="content-text">
              <p class="shu"></p>
              <p>密码</p>
            </div>
            <el-input v-model="password" placeholder="请输入" show-password></el-input>
          </div> -->
        </div>
        <div class="login-btn" @click="show = false">{{ $t('assemble.下一步') }}</div>
      </div>


      <div v-else class="company-content">
        <div class="company-text">
          <span style="font-size: 13px; cursor: pointer;margin-right: 10px;" @click="handleback"><i
              class="el-icon-back">{{ $t('assemble.上一步') }}</i></span>{{ $t('assemble.完善资料') }}
        </div>
        <div class="company-bottom">
          <el-form :model="wanshanForm" :rules="wanshanrules" ref="wanshanForm" label-width="100px" class="demo-ruleForm">
            <!-- <el-form-item prop="chName">
              <div class="content-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>被授权商中文名称</p>
                </div>
                <el-input class="input" v-model="wanshanForm.chName" placeholder="请输入"></el-input>
              </div>
            </el-form-item> -->

            <el-form-item prop="name">
              <div class="content-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>{{ $t('assemble.姓名') }}</p>
                </div>
                <el-input class="input" v-model="wanshanForm.name" :placeholder="$t('assemble.请输入')"></el-input>
              </div>
            </el-form-item>

            <el-form-item prop="phone">
              <div class="content-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>{{ $t('assemble.电话') }}</p>
                </div>
                <el-input class="input" v-model="wanshanForm.phone" :placeholder="$t('assemble.请输入')"></el-input>
              </div>
            </el-form-item>

            <el-form-item prop="mobile">
              <div class="content-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>{{ $t('assemble.手机号') }}</p>
                </div>
                <el-input class="input" v-model="wanshanForm.mobile" :placeholder="$t('assemble.请输入')"></el-input>
              </div>
            </el-form-item>


          </el-form>



          <!-- <div class="content-box">
            <div class="content-text">
              <p class="shu"></p>
              <p>被授权商中文名称</p>
            </div>
            <el-input class="input" v-model="chName" placeholder="请输入"></el-input>
          </div>
          <div class="content-box huoqu-box">
            <div class="content-text">
              <p class="shu"></p>
              <p>姓名</p>
            </div>
            <el-input v-model="name" placeholder="请输入"></el-input>
          </div>
          <div class="content-box">
            <div class="content-text">
              <p class="shu"></p>
              <p>电话</p>
            </div>
            <el-input v-model="phone" placeholder="请输入"></el-input>
          </div>
          <div class="content-box">
            <div class="content-text">
              <p class="shu"></p>
              <p>手机号</p>
            </div>
            <el-input v-model="mobile" placeholder="请输入"></el-input>
          </div> -->
        </div>
        <div class="login-btn " @click="submitmessage">{{ $t('assemble.提交') }}</div>
      </div>

    </div>
  </div>
</template>
<script>
import { sendcode, check, emailregister, onepage, checkCompany } from '../../utils/api'
export default {
  data() {
    return {
      dataForm: {
        email: '',
        authcode: '',//验证码
        password: '',
        companyName: "",//公司名称
      },
      datarange: {
        companyName: [
          { required: true, message: this.$t('assemble.请输入公司名称'), trigger: 'blur' },
        ],
        email: [
          { required: true, message: this.$t('assemble.请输入邮箱地址'), trigger: 'blur' },
        ],
        authcode: [
          { required: true, message: this.$t('assemble.请输入验证码'), trigger: 'blur' },
        ],
        password: [
          { required: true, message: this.$t('assemble.请输入密码'), trigger: 'blur' },
        ],
      },
      show: true,
      email: '',
      authcode: '',//验证码
      password: '',
      wanshanForm: {
        chName: '',//被授权商中文名称
        name: '',//姓名
        phone: '',//电话
        mobile: '',//手机号
      },
      wanshanrules: {
        chName: [
          { required: true, message: this.$t('assemble.请输入被授权中文名称'), trigger: 'blur' },
        ],
        name: [
          { required: true, message: this.$t('assemble.请输入姓名'), trigger: 'blur' },
        ],
        phone: [
          { required: true, message: this.$t('assemble.请输入姓名'), trigger: 'blur' },
        ],
        mobile: [
          { required: true, message: this.$t('assemble.请输入手机号'), trigger: 'blur' },

        ]
      },
      chName: '',//被授权商中文名称
      name: '',//姓名
      phone: '',//电话
      // mobile: '',//手机号
      time: 60,
      codeflag: true,//控制验证码
      content: "",
    }
  },
  mounted() {
    this.genAboutus()
  },
  methods: {
    handleback() {
      this.show = true
    },
    async genAboutus() {
      let res = await onepage({
        name: "loginbeief"
      })
      if (res.code == 1) {
        console.log("关于我们", res)
        this.content = res.data
      }
      if (res.code == 401) {
        this.$router.push({ path: '/login' })
      }

    },
    //获取验证码
    async handleSendcode() {
      const that = this
      let res = await sendcode({
        email: that.dataForm.email,
        event: 'register'
      })
      if (res.code == 1) {
        this.$message({
          message: this.$t('assemble.验证码发送成功'),
          type: 'success'
        });
        that.codeflag = false
        const interval = window.setInterval(function () {
          if ((that.time--) <= 0) {
            that.time = 60
            that.codeflag = true
            window.clearInterval(interval)
          }
        }, 1000)
      } else {
        this.$message({
          message: res.msg,
          type: 'error'
        });
      }


    },

    //验证公司名称
    async handelcheckCompany() {
      //  console.log("公司名称",this.dataForm.companyName)
      if (this.dataForm.companyName == "") return
      let res = await checkCompany({
        company: this.dataForm.companyName
      })
      if (res == 0) {
        this.$message({
          message: this.$t('assemble.该公司名称已被注册！'),
          type: 'error'
        });
      }
      console.log("验证公司名称", res)
    },
    //注册校验验证码
    async checkCode() {
      if (this.dataForm.authcode == "") {
        console.log("2222", this.dataForm.authcode)
        return
      }

      let res = await check({
        email: this.dataForm.email,
        event: 'register',
        captcha: this.dataForm.authcode
      })

      console.log("校验验证码", res)
      if (res.code == 1) {
        // this.$message({
        //   message: '注册成功，请完善资料！',
        //   type: 'success'
        // });
      } else {
        this.$message({
          message: res.msg,
          type: 'error'
        });
      }
    },

    //提交
    async submitmessage() {
      let data = {
        type: "1",
        company: this.dataForm.companyName,
        email: this.dataForm.email,
        captcha: this.dataForm.authcode,
        password: this.dataForm.password,
        name: this.wanshanForm.name,
        phone: this.wanshanForm.phone,
        mobile: this.wanshanForm.mobile,
      }
      let res = await emailregister(data)
      if (res.code == 1) {
        this.show = false
        this.$message({
          message: this.$t('assemble.请等待网易批准后登入系统'),
          type: 'success'
        });
        this.$router.push({ path: '/login' })

      } else {
        this.$message({
          message: res.msg,
          type: 'error'
        });
      }
    }
  },

}
</script>
<style scoped lang="scss">
.company {
  width: 100vw;
  height: 100vh;
  background: #F8F8F8;
  border-radius: 0px 0px 0px 0px;

  .company-box {
    display: flex;
    align-items: center;

    .page-left {
      width: 400px;
      height: 100vh;
      background: #E00000;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      // padding: 434px 100px;
      box-sizing: border-box;


      .logo-box {
        // width: 158.42px;
        height: 56px;
        width: 100%;
        text-align: center;
        margin-top: 400px;

        .title {
          width: 387px;
          height: 21px;
          font-size: 24px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: white;
          line-height: 28px;
          font-weight: bolder;
          width: 100%;
          text-align: center;
        }

        .page-text {
          font-size: 16px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 28px;
          margin-top: 30px;
          width: 100%;
          text-align: center;

        }

        .logo-img {
          width: 100%;
          height: 100%;
        }
      }


    }

    .company-content {
      width: 500px;
      height: 559px;
      background: #FFFFFF;
      box-shadow: 5px 0px 15px 0px rgba(224, 0, 0, 0.05);
      border-radius: 50px 50px 50px 50px;
      opacity: 1;
      margin-left: 260px;
      padding: 40px;
      box-sizing: border-box;

      .company-text {
        font-size: 20px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 28px;
      }

      .company-bottom {
        // margin-top: 30px;

        .content-box {

          .content-text {
            font-size: 16px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 21px;
            display: flex;
            align-items: center;

            .shu {
              width: 4px;
              height: 14px;
              background: #E00000;
              border-radius: 2px 2px 2px 2px;
              opacity: 1;
              margin-right: 6px;
            }
          }

          .content-box {
            width: 350px;
            height: 42px;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            border: 1px solid #EDEDED;
          }
        }

        .huoqu-box {
          position: relative;

          .gain {
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #E00000;
            line-height: 16px;
            position: absolute;
            right: 10px;
            top: 70px;
            cursor: pointer;
          }
        }
      }

      .login-btn {
        width: 350px;
        height: 45px;
        background: linear-gradient(315deg, #E00000 0%, #FF2424 100%);
        border-radius: 22px 22px 22px 22px;
        opacity: 1;
        font-size: 18px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 45px;
        text-align: center;
        margin: 20px auto 0;
        cursor: pointer;

      }

      .mar {
        margin-top: 50px;
      }
    }

  }
}

::v-deep .el-form-item__content {
  margin-left: 0px !important;
  line-height: normal !important;
  font-size: 18px !important;
}

::v-deep .el-form-item {
  margin-bottom: 0px !important;

}</style>